<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title2022/3/20</title>
    <script src="fruits.js"></script>
    <script src="vue2.6.14.js"></script>
    <link rel="stylesheet" href="datatable.css">

</head>
<body>
<!--实现购买 水果数量 自动计算  计算所勾选的金额-->
<div id="div1">
   <table>
       <thead>
       <tr>
           <th v-for="(val,key) in fruits.data[0]">{{key}}</th>
           <th>小计</th>
       </tr>
       </thead>
       <tfoot>
       <tr>
           <th v-for="(val,key)in fruits.data[0]">{{key}}</th>
           <th>小计</th>
       </tr>
       </tfoot>
       <tbody>
       <tr v-for="(item,index)in fruits.data">
           <td>{{item.id}}</td>
           <td>{{item.name}}</td>
           <td>{{item.price}}</td>
           <td><input type="number" v-model="item.num"></td>
           <td>
               {{item.price*item.num | toFixed(2)}}
           </td>
       </tr>
       </tbody>

   </table>
    <div>
        小计: <span></span>
    </div>
    <div>
        总计: <span>{{total | toFixed(1)}}</span>
    </div>
</div>

<script>
    new Vue({
        el:'#div1',

        data:{
            fruits
        },
        computed:{
            //算总体总价
            total:function (){
                let sum=0;
                for (const item of this.fruits.data) {
                    if(item.state){
                        sum+=item.price*item.num
                    }

                }
                return sum;
            },
            //算单样物品价格
            sum:{

            }

        },
        filters:{
            toFixed:function (val,n){
                return val.toFixed(n)
            }
        },


    })

</script>
</body>
</html>
